<template>
    <div class="loan-out-want-index">
        <div class="wrapper">
            <ul class="form-box">
                <li class="form__item select">
                    <span class="form__key">出借金额</span>
                    <div class="form__value">
                        <picker-list picker-id='amount' :list='amountList' v-model='amount'></picker-list>
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">还款方式</span>
                    <div class="form__value">
                        <picker-list picker-id='payway' :list='paywayList' v-model='payway'></picker-list>
                    </div>
                </li>
                <li class="form__item detail select">
                    <span class="form__key">出借时长</span>
                    <div class="form__value" v-if='payway == "HBFX"'>
                        <picker-range 
                            key='days' 
                            picker-id='days' 
                            :from='daysList'
                            :to='daysList'
                            v-model='days'></picker-range>
                    </div>
                    <div class="form__value" v-else>
                        <picker-range 
                            key='periods' 
                            picker-id='periods' 
                            :from='periodsList'
                            :to='periodsList'
                            v-model='periods'></picker-range>
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">年化利率</span>
                    <div class="form__value">
                        <picker-list picker-id='yearRate' :list='yearRateList' v-model='yearRate'></picker-list>
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key" @click='showServiceTips = true'>服务费率<i class="info"></i></span>
                    <div class="form__value">
                        <picker-list picker-id='serviceRate' :list='serviceRateList' v-model='serviceRate'></picker-list>
                    </div>
                </li>
                <li class="form__item select">
                    <span class="form__key">服务最低额度</span>
                    <div class="form__value">
                        <picker-list picker-id='serviceFee' :list='serviceFeeList' v-model='serviceFee'></picker-list>
                    </div>
                </li>
            </ul>

            <!-- <ul class="form-box">
                <li class="form__item">
                    <span class="form__key">必备信用资料</span>
                    <i class="iconfont icon-arrow"></i>
                </li>
            </ul> -->

            <!-- <ul class="form-box">
                <li class="form__item select">
                    <span class="form__key">所有人可见</span>
                    <div class="form__value">
                        <picker-list picker-id='isPublic' :list='isPublicList' v-model='isPublic'></picker-list>
                    </div>
                </li>
            </ul> -->

            <!-- <ul class="form-box">
                <li class="form__item">
                    <div class="form__value">
                        <textarea v-model='addSay' rows="3" placeholder="补充说明"></textarea>
                    </div>
                </li>
            </ul> -->
            
            <div class="form__agreement">
                <check-box v-model='agreementCheck'><span class='form__agreement-text'>已阅读并同意 <em @click.stop='showAgreement = true'>《有借借款协议》</em> </span></check-box>
            </div>
        </div>
        <div class="single-button">
            <span class="button purple" :class='{disabled : !agreementCheck}' @click='confirm'>确定发布</span>
        </div>

        
        <auth-step
            v-if='noAuth'
            :show='showTips'
            @toggle='showTips = !showTips'
            @close='showTips = false'>
        </auth-step>

        <modal
            :show='showServiceTips'
            @close='showServiceTips = false'>
            <div class="modal-tips">
                <p>服务费是什么？ </p>
                <p>服务费=借款金额*服务费率 如果计算结果小于最低额度，按照最低额度收取。 服务费由借款人支付。</p> 
            </div>
        </modal>

        <pay-password
            :show='showPayPassword'
            @close='showPayPassword=false'
            @finish='payFinish'></pay-password>
            
        <agreement
            :show='showAgreement'
            @close='showAgreement=false'></agreement>
    </div>
</template>

<script>
    import { Promise } from 'es6-promise'
    import footerBar from '../components/FooterBar.vue'
    import selectGroup from '../components/SelectGroup.vue'
    import selectOption from '../components/SelectOption.vue'
    import radioGroup from '../components/RadioGroup.vue'
    import areaSelect from '../components/AreaSelect.vue'
    import radio from '../components/Radio.vue'
    import loading from '../components/Loading.vue'
    import checkBox from '../components/CheckBox.vue'
    import toolTip from '../components/ToolTip.vue'
    import modal from '../components/Modal.vue'
    import confirm from '../components/Confirm.vue'
    import buttonLoading from '../components/ButtonLoading.vue'
    import authStep from '../components/AuthStep.vue'
    import pagination from '../components/Pagination.vue'
    import payPassword from '../components/PayPassword.vue'
    import pickerList from '../components/PickerList.vue'
    import pickerRange from '../components/PickerRange.vue'
    import agreement from '../components/Agreement.vue'
    import  { mapGetters, mapActions }  from 'vuex'
    import { LoanOutPublishValidation } from '../validation/validation'
    import { loanOutApi } from '../api/api'
    import moment from 'moment'
    import amountList from '../data/amountList'
    import paywayList from '../data/paywayList'
    import daysList from '../data/daysList'
    import periodsList from '../data/periodsList'
    import yearRateList from '../data/yearRateList'
    import serviceFeeList from '../data/serviceFeeList'
    import serviceRateList from '../data/serviceRateList'

    export default {
        components:{
            footerBar,
            authStep,
            selectGroup,
            selectOption,
            radioGroup,
            radio,
            checkBox,
            areaSelect,
            loading,
            toolTip,
            modal,
            confirm,
            agreement,
            buttonLoading,
            pagination,
            payPassword,
            pickerList,
            pickerRange
        },
        data() {
            return {
                amount:'',
                amountList:amountList,
                payway:'HBFX',
                paywayList:paywayList,
                days:'',
                daysList:daysList,
                periods:'',
                periodsList:periodsList,
                yearRate:2000,
                yearRateList:yearRateList,
                serviceFee:-1,
                serviceFeeList:serviceFeeList,
                serviceRate:-1,
                serviceRateList:serviceRateList,
                isPublicList:[{
                    value:1,
                    display:'是'
                },{
                    value:0,
                    display:'否'
                }],
                isPublic:1,
                addSay:'',
                params:{},
                agreementCheck:true,
                password:'',
                showTips:false,
                showPayPassword:false,
                showAgreement:false,
                showServiceTips:false
            }
        },
        computed:{
            ...mapGetters([
                'msgTip',
                'localInfo'
            ]),
            userInfo(){
                return this.localInfo.userInfo
            },
            noAuth(){
                return (this.userInfo.user && this.userInfo.user.validState != 'OK' ) || this.userInfo.noZmxy || this.userInfo.noOperators
            },
            isPublicBoolean(){
                if(this.isPublic == 0){
                    return false
                }
                return true
            },
            daysFrom(){
                if(this.days){
                    return this.days[0];
                }
            },
            daysTo(){
                if(this.days){
                    return this.days[1];
                }
            },
            periodsFrom(){
                if(this.periods){
                    return this.periods[0];
                }
            },
            periodsTo(){
                if(this.periods){
                    return this.periods[1];
                }
            },
        },
        methods:{
            // actions
            ...mapActions([
                'showLoading',
                'hideLoading',
                'setMsgTip'
            ]),

            payFinish(password){
                this.params.tradePassword = password
                this.password = password
                this.showPayPassword = false
                this.publish()
            },
            confirm(){
                if(this.userInfo.user && this.userInfo.user.validState != 'OK'){
                    this.setMsgTip({
                        text:'请先完成实名认证',
                        type:'warn',
                    })
                    this.$router.push({
                        name:'user-bind-card-verified'
                    })
                    return false
                }
                if(this.userInfo.isExpired){
                    this.setMsgTip({
                        text:'信用报告已过期，请重新认证',
                        type:'warn',
                    })
                    this.$router.push({
                        name:'user-credit-report-index'
                    })
                    return false
                }
                if(this.userInfo.noZmxy || this.userInfo.noOperators){
                    this.setMsgTip({
                        text:'请先完善信用报告',
                        type:'warn',
                    })
                    this.$router.push({
                        name:'user-credit-report-index'
                    })
                    return false
                }

                let lendDaysFrom
                let lendDaysTo
                let lendAmountFrom
                let lendAmountTo

                lendAmountFrom = this.amount.split('~')[0]
                lendAmountTo = this.amount.split('~')[1]
                if(this.payway == 'HBFX'){
                    lendDaysFrom = this.daysFrom
                    lendDaysTo = this.daysTo
                }
                else{
                    lendDaysFrom = this.periodsFrom
                    lendDaysTo = this.periodsTo
                }
                this.params = {
                    lendAmountFrom:lendAmountFrom * 100,
                    lendAmountTo:lendAmountTo * 100,
                    lendDaysFrom:lendDaysFrom,
                    lendDaysTo:lendDaysTo,
                    repayWay:this.payway,
                    yearRate:this.yearRate,
                    serviceFee:this.serviceFee * 100,
                    serviceFeeRate:this.serviceRate,
                    addSay:this.addSay,
                    isPublic:this.isPublicBoolean,
                    tradePassword:this.password,
                }

                if(!LoanOutPublishValidation(this.params)) return

                this.publish()
            },
            goSuccess(no){
                this.$router.replace({
                    name:'loan-out-success',
                    params:{
                        no:no
                    }
                })
            },
            publish(){
                this.showLoading()
                loanOutApi.publish(this.params)
                .then(result=>{
                    this.hideLoading()
                    this.goSuccess(result.lendNo)
                })
                .catch(error => {
                    console.error(error)
                    this.hideLoading()
                })
            }
        },
        created(){
            
            setTimeout(()=>{
                this.showTips = true
            },300)
        }
    }
</script>

<style lang="scss">
    @import "../sass/variables";
    @import "../sass/extends";
    @import "../sass/mixins";
    .loan-out-want-index{
        transform:translate3d(0,0,0);
        .wrapper{
            padding-bottom: 100px;
        }
        .explain{
            @extend %font-caption;
            padding:8px 24px 0 24px;
            color:$importColor;
        }
        .money-info{
            margin-top:16px;
        }
        .money-info__header{
            display: flex;
        }
        .money-info__title{
            @extend %font-body1;
            color:$importColor;
            padding-bottom: 8px;
            margin-bottom: 8px;
            border-bottom:1px solid $sectionColor;
        }
        .money-info__box{
            width: 100%;
            flex:1;
            &:nth-of-type(2n){
                margin-left:24px;
            }
        }
        .money-info__item{
            @extend %font-caption;
            padding-top: 4px;
            display: flex;
            justify-content:space-between;
        }
        .money-info__number{
            @extend %font-subhead;
            color:$orange;
            padding-top: 4px;
            text-align:right
        }
        .plan{
            padding-top: 16px;
        }
        .agreement{
            padding:16px;
        }
        .agreement__text{
            @extend %font-body1;
            display: block;
            color:$importColor;
        }
        .tips{
            @extend %font-caption;
            color:rgba(#000,.26);
            padding:0 16px 100px 16px;
            line-height: 20px;
        }
    }

</style>
